﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜蜜生活记事本 · 登录</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="login-body">
<div class="login-wrapper">
    <div class="login-card">
        <div class="login-brand">
            <h1>甜蜜生活记事本</h1>
            <p>记录属于你们的小确幸</p>
        </div>
        <div class="login-forms">
            <div id="formMessage" class="form-message"></div>
            <form id="loginForm" class="login-form">
                <h2>账号登录</h2>
                <input name="username" placeholder="用户名" required>
                <input name="password" type="password" placeholder="密码" required>
                <button type="submit" class="primary-btn full">登录</button>
                <p class="switch-tip">没有账号？<a href="javascript:void(0);" id="showRegister">立即注册</a></p>
            </form>
            <form id="registerForm" class="login-form hidden">
                <h2>注册账号</h2>
                <input name="username" placeholder="用户名" required>
                <input name="displayName" placeholder="展示昵称" required>
                <input name="email" placeholder="邮箱 (可选)">
                <input name="password" type="password" placeholder="密码" required>
                <input name="confirmPassword" type="password" placeholder="确认密码" required>
                <button type="submit" class="primary-btn full">提交注册</button>
                <p class="switch-tip">已经有账号？<a href="javascript:void(0);" id="showLogin">返回登录</a></p>
            </form>
        </div>
    </div>
</div>
<script src="js/login.js"></script>
</body>
</html>
